/* eslint-disable camelcase */
import React, { forwardRef, useImperativeHandle, useState } from 'react';
import { Card, Button, Col, Spin, Form, Row, Input, Select, DatePicker } from 'antd';
import useOrderAttrList from '../../hooks/useOrderAttrList';
import FormExtraContent from './FormExtraContent';

const SearchForm = forwardRef(({ form, onSearch }, ref) => {
  const { getFieldDecorator } = form;

  const defaultSelectPlaceholder = '---请选择---';
  // const defaultInputPlaceholder = '---请输入---';

  // 通过自定义hook获取业务对象属性
  const [orderBusiTypeList, orderBusiTypeLoading] = useOrderAttrList('orderBusiType');
  const [orderStatusList, orderStatusLoading] = useOrderAttrList('orderStatus');
  const [sourceTypeList, sourceTypeLoading] = useOrderAttrList('sourceType');
  const [claimTypeList, claimTypeLoading] = useOrderAttrList('claimType');

  function renderAttrList(attrList) {
    return attrList.map(item => (
      <Select.Option key={item.attrValue} value={item.attrValue}>
        {item.attrValueName}
      </Select.Option>
    ));
  }

  const [query_num, setQueryNum] = useState();
  const [pay_start, setPayStart] = useState();

  useImperativeHandle(ref, () => {
    form.getParamsObj = () => {
      const formValues = form.getFieldsValue();
      return {
        ...formValues,
        query_num,
        pay_start,
        order_from: formValues.order_from.join(','),
        shipping_id: formValues.shipping_id.join(','),
      };
    };
    return {
      form,
    };
  });

  return (
    <>
      <Card
        title="订单查询"
        className="cute"
        extra={
          <FormExtraContent
            onQueryNumChange={val => setQueryNum(val)}
            onContactPhoneChange={val => (val ? setPayStart('yes') : setPayStart(undefined))}
          />
        }
      >
        <Spin spinning={false}>
          <Form className="flow fix-label padding-bottom">
            <Row gutter={16}>
              <Col span={6}>
                <Form.Item label="业务类型">
                  {getFieldDecorator('orderBusiType', {
                    // initialValue: '11',
                  })(
                    <Select
                      allowClear
                      placeholder={defaultSelectPlaceholder}
                      loading={orderBusiTypeLoading}
                    >
                      {renderAttrList(orderBusiTypeList)}
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="订单状态">
                  {getFieldDecorator('orderStatus', {
                    // initialValue: '11',
                  })(
                    <Select
                      allowClear
                      placeholder={defaultSelectPlaceholder}
                      loading={orderStatusLoading}
                    >
                      {renderAttrList(orderStatusList)}
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="流程类型">
                  {getFieldDecorator('flowDefType')(
                    <Select allowClear placeholder="请选择">
                      <Select.Option value="">asd</Select.Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={6}>
                <Form.Item label="订单来源">
                  {getFieldDecorator('order_from', {
                    initialValue: [],
                  })(
                    <Select
                      mode="multiple"
                      allowClear
                      placeholder={defaultSelectPlaceholder}
                      loading={sourceTypeLoading}
                    >
                      {renderAttrList(sourceTypeList)}
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="配送方式">
                  {getFieldDecorator('shipping_id', {
                    initialValue: [],
                  })(
                    <Select
                      mode="multiple"
                      allowClear
                      placeholder={defaultSelectPlaceholder}
                      loading={claimTypeLoading}
                    >
                      {renderAttrList(claimTypeList)}
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="发起时间">
                  {getFieldDecorator('schCreateDate')(<DatePicker />)}
                </Form.Item>
              </Col>
              <Col span={12} className="text-right">
                <Button type="primary" onClick={onSearch}>
                  查询
                </Button>
                <Button className="margin-left" onClick={() => form.resetFields()}>
                  重置
                </Button>
              </Col>
            </Row>
          </Form>
        </Spin>
      </Card>
    </>
  );
});

export default Form.create()(SearchForm);
